<template>
  <!-- 集采汇总列表 -->
  <div class="e-table">
    <div class="top">
      <div class="left" style="margin-left: 10px;">
        <div>
          <el-button
            size="small"
            @click="buttonAdd()"
            style="background: #7aa818; color: #fff"
            >新增</el-button
          >
        </div>
        <!-- <div
          style="padding-left: 10px; cursor: pointer"
          @click="batchOperation"
        >
          <img src="@/assets/piliang.png" />
          <span style="padding-left: 8px">{{ batch }}</span>
        </div> -->
      </div>
      <div class="right">
        <div>
          <el-input placeholder="输入项目编号或机构" v-model="pagination.keyword" size="small" @blur="search">
            <i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i>
          </el-input>
        </div>
        <div style="margin-left: 5px;">
          <el-button size="small" style="background: #2e61d7; color: #fff;"
            @click="heightSharch"
            >高级搜索</el-button
          >
        </div>
      </div>
    </div>
    <el-table
      class="table"
      border
      ref="table"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @cell-mouse-enter="cellMouseEnter"
      @cell-mouse-leave="cellMouseLeave"
                v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
    >
      <el-table-column type="selection" width="50" v-if="isBatch" fixed>
      </el-table-column>
      <el-table-column label="汇总编号" min-width="250" fixed  show-overflow-tooltip>
        <template slot-scope="scope">
          <span
            @click="click(scope.row.billId,scope.row.state)"
            style="color: blue; cursor: pointer"
          >
            {{ scope.row.billNo }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        prop="summaryDate"
        label="汇总日期"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        prop="amount"
        label="计划金额（元）"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="100"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
         <ToolHistory v-if="scope.row.state == '1'" :key="scope.$index" url="/material/flowEngin/getAuditHistory" :billId="scope.row.billId" :billType="1004">
                <span   v-status="scope.row.state">
                    {{["草稿", "审核中", "已审核", "已关闭",'', "已作废"][scope.row.state]}}
                </span>
            </ToolHistory>
            <span v-else  v-status="scope.row.state">
                {{["草稿", "审核中", "已审核", "已关闭",'', "已作废"][scope.row.state]}}
            </span>
        </template>
      </el-table-column>
       <el-table-column prop="orgName" label="机构" min-width="250">
      </el-table-column>
      <el-table-column prop="sourceType" label="来源" show-overflow-tooltip>
        <template slot-scope="scope">
          <span> {{ ["主动增加", "自动生成"][scope.row.sourceType] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <ComPagination
      :total="pagination.total"
            :pageSize.sync="pagination.pageSize"
            :currentPage.sync="pagination.currentPage"
            @currentChange="purchaseCollectList"
            @sizeChange="purchaseCollectList"
    />

  </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination.vue'
import requests from '@/api/materials/purchaseCollect.js'
import { vueDom, debounce, advanceSearch, showLoading, hideLoading, } from '@/utils/common.js'
import request from '@/api/materials/plan.js'
import { mapMutations } from 'vuex'
export default {
    components: {
        ComPagination,
    },
    data () {
        return {
            isBatch: false, //是否进入批量操作
            batch: '进入批量管理',
            dialogVisibleSearch: false,
            searchIpt: '',
            input1: '',
            value1: '',
            value2: '',
            multipleSelection: [],
            tableData: [
                {
                    billNo: '', //汇总编号
                    orgName: '', //机构
                    summaryDate: '', //汇总日期
                    amount: '', //计划金额（元）
                    state: '', //状态
                    sourceType: '', //来源
                },
            ],
            MouseEnterId: 0,
            pagination: {
                total: 0,
                'beginPlanDate': '',
                'endPlanDate': '',
                'keyword': '',
                'limit': 20,
                'orgId': '',
                'page': 1,
                'sourceType': [],
                'states': []
            },
            bottomSetting: true,
        }
    },
    created () {
        showLoading()
        this.purchaseCollectList()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 170
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 170
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        ...mapMutations(['setSearchData']),
        //模糊搜索
        search () {
            this.purchaseCollectList()
        },
        //清空高级搜索的数据
        clearData () {
            this.pagination = {
                'beginPlanDate': '',
                'endPlanDate': '',
                'keyword': '',
                'limit': 20,
                'orgId': '',
                'page': 1,
                'sourceType': [],
                'states': []
            }
            this.setSearchData({ equipSearchData: this.pagination })
        },
        // 高级搜索
        heightSharch () {
            advanceSearch('/purchasePlanHeightSearch').then(res => {
                this.pagination = res.equipSearchData
                this.purchaseCollectList()
                this.clearData()
            })
        },
        //批量管理
        batchOperation () {
            this.isBatch = !this.isBatch
            if (this.isBatch) {
                this.batch = '退出批量管理'
                this.$refs.table.clearSelection()
            } else {
                this.batch = '进入批量管理'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.id
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        handleSelectionChange (val) {
            this.multipleSelection = val
            console.log(this.multipleSelection)
        },
        //获取列表数据
        purchaseCollectList () {
            if(this.pagination.currentPage) {
                this.pagination.page = this.pagination.currentPage
            }
            if(this.pagination.pageSize) {
                this.pagination.limit = this.pagination.pageSize
            }
            requests
                .purchaseCollectList(this.pagination)
                .then(res => {
                    this.tableData = res.list
                    this.pagination.total = res.totalCount
                    hideLoading()

                })
        },
        //新增按钮
        buttonAdd () {
            this.$router.push('/purchaseCollectAdd')
        },
        //详情页
        articulars (billid) {
            this.$router.push({
                path: '/purchaseParticulars',
                query: { billid },
            })
        },
        //修改页
        edit (billid) {
            this.$router.push({
                path: '/purchaseEdit',
                query: { billid },
            })
        },
        //点击编号
        click (billid, state) {
            if(state == -1 || state == 2 || state == 5 ) {
                this.$router.push({
                    path: '/purchaseParticulars',
                    query: { billid },
                })
            }else {
                request.getCurrentUnitInfo({
                    'billId': billid,
                    'billType': '1004',
                    'freeNextUnitIndex': 0,
                    'freeNextUser': '',
                    'isPass': true,
                    'isShareInAudit': true,
                    'opinion': '',
                    'orgId': '',
                    'orgName': '',
                    'userId': '',
                    'workId': ''
                })
                    .then(res=>{
                        if(res.canModify) {
                            this.$router.push({
                                path: '/purchaseEdit',
                                query: { billid, res },
                            })
                        }else{
                            this.$router.push({
                                path: '/purchaseParticulars',
                                query: { billid },
                            })
                        }
                    })
            }

        },
    },
}
</script>
<style lang="scss" scoped>
.like {
  color: rgb(46, 97, 215);
  font-size: 17px;
  line-height: 30px;
  cursor: pointer;

}
::v-deep.el-table .cell {
  text-align: center;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 10px; // 纵向滚动条
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 5px;
}
</style>